<template>
  <div class="daily-challenge">
    <div class="game-header">
      <el-button :icon="ArrowLeft" @click="goBack">返回</el-button>
      <div class="game-title">
        <h1>📅 每日挑战</h1>
        <p>每天更新的特别挑战，完成可获得额外奖励</p>
      </div>
      <div class="game-stats">
        <el-statistic title="连续打卡" :value="gameStats.streak" suffix="天" />
        <el-statistic title="完成挑战" :value="gameStats.completed" />
        <el-statistic title="获得积分" :value="gameStats.points" />
      </div>
    </div>

    <!-- 每日挑战日历 -->
    <div class="challenge-calendar">
      <h2>📅 本月挑战记录</h2>
      <div class="calendar-grid">
        <div 
          v-for="day in calendarDays" 
          :key="day.date"
          class="calendar-day"
          :class="{
            today: day.isToday,
            completed: day.completed,
            missed: day.missed,
            future: day.isFuture
          }"
        >
          <div class="day-number">{{ day.day }}</div>
          <div class="day-status">
            <el-icon v-if="day.completed"><CircleCheck /></el-icon>
            <el-icon v-else-if="day.missed"><CircleClose /></el-icon>
            <el-icon v-else-if="day.isToday"><Clock /></el-icon>
          </div>
        </div>
      </div>
      <div class="calendar-legend">
        <span><el-icon><CircleCheck /></el-icon> 已完成</span>
        <span><el-icon><CircleClose /></el-icon> 已错过</span>
        <span><el-icon><Clock /></el-icon> 今日挑战</span>
      </div>
    </div>

    <!-- 今日挑战 -->
    <div class="today-challenge">
      <div class="challenge-header">
        <h2>🎯 今日挑战</h2>
        <div class="challenge-date">
          {{ new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' }) }}
        </div>
      </div>

      <div v-if="!todayCompleted" class="challenge-content">
        <el-card class="challenge-card" :body-style="{ padding: '32px' }">
          <div class="challenge-info">
            <div class="challenge-badge">
              <div class="badge-icon" :style="{ background: todayChallenge.color }">
                {{ todayChallenge.icon }}
              </div>
              <div class="badge-info">
                <h3>{{ todayChallenge.title }}</h3>
                <p>{{ todayChallenge.description }}</p>
              </div>
            </div>

            <div class="challenge-details">
              <div class="detail-item">
                <el-icon><TrendCharts /></el-icon>
                <span>难度: </span>
                <el-tag :type="getDifficultyType(todayChallenge.difficulty)" size="small">
                  {{ todayChallenge.difficulty }}
                </el-tag>
              </div>
              <div class="detail-item">
                <el-icon><Timer /></el-icon>
                <span>限时: {{ todayChallenge.timeLimit }} 分钟</span>
              </div>
              <div class="detail-item">
                <el-icon><Trophy /></el-icon>
                <span>基础奖励: {{ todayChallenge.baseReward }} 积分</span>
              </div>
              <div class="detail-item">
                <el-icon><Star /></el-icon>
                <span>连击奖励: {{ todayChallenge.streakBonus }}% 加成</span>
              </div>
            </div>

            <div class="rewards-preview">
              <h4>🎁 完成奖励</h4>
              <div class="rewards-list">
                <el-tag type="warning" size="large">
                  <el-icon><Trophy /></el-icon>
                  {{ calculateTotalReward() }} 积分
                </el-tag>
                <el-tag type="success" size="large">
                  <el-icon><Star /></el-icon>
                  +50 经验值
                </el-tag>
                <el-tag v-if="gameStats.streak >= 6" type="danger" size="large">
                  <el-icon><Medal /></el-icon>
                  连续7天额外奖励
                </el-tag>
              </div>
            </div>
          </div>

          <div class="challenge-action">
            <el-button 
              type="primary" 
              size="large"
              @click="startChallenge"
              :loading="isLoading"
            >
              {{ challengeProgress > 0 ? '继续挑战' : '开始挑战' }}
            </el-button>
          </div>
        </el-card>
      </div>

      <!-- 已完成状态 -->
      <div v-else class="completed-state">
        <el-result
          icon="success"
          title="今日挑战已完成！"
          sub-title="明天再来挑战新的任务吧"
        >
          <template #extra>
            <div class="completed-info">
              <div class="completed-stat">
                <span>完成时间:</span>
                <strong>{{ completedTime }}</strong>
              </div>
              <div class="completed-stat">
                <span>获得积分:</span>
                <strong class="points">{{ completedPoints }}</strong>
              </div>
              <div class="completed-stat">
                <span>连续天数:</span>
                <strong class="streak">{{ gameStats.streak }} 天</strong>
              </div>
            </div>
          </template>
        </el-result>
      </div>
    </div>

    <!-- 挑战历史 -->
    <div class="challenge-history">
      <h2>📜 挑战历史</h2>
      <el-table :data="challengeHistory" stripe style="width: 100%">
        <el-table-column prop="date" label="日期" width="120" />
        <el-table-column prop="title" label="挑战名称" />
        <el-table-column prop="type" label="类型" width="120">
          <template #default="{ row }">
            <el-tag :type="getTypeColor(row.type)" size="small">
              {{ row.type }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="100">
          <template #default="{ row }">
            <el-tag :type="getDifficultyType(row.difficulty)" size="small">
              {{ row.difficulty }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="score" label="得分" width="100" align="center">
          <template #default="{ row }">
            <strong style="color: #409eff;">{{ row.score }}</strong>
          </template>
        </el-table-column>
        <el-table-column prop="reward" label="获得积分" width="120" align="center">
          <template #default="{ row }">
            <el-tag type="warning">{{ row.reward }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-icon v-if="row.status === '已完成'" style="color: #67c23a; font-size: 20px;">
              <CircleCheck />
            </el-icon>
            <el-icon v-else style="color: #f56c6c; font-size: 20px;">
              <CircleClose />
            </el-icon>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 挑战进行对话框 -->
    <el-dialog
      v-model="showChallengeDialog"
      :title="todayChallenge.title"
      width="90%"
      top="5vh"
      fullscreen
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div class="challenge-game">
        <div class="game-timer">
          <el-progress 
            type="circle" 
            :percentage="Math.round((elapsedTime / (todayChallenge.timeLimit * 60)) * 100)"
            :width="120"
            :color="getTimerColor()"
          >
            <template #default>
              <span class="timer-text">{{ formatTime(todayChallenge.timeLimit * 60 - elapsedTime) }}</span>
            </template>
          </el-progress>
          <div class="game-score">
            <el-icon><Trophy /></el-icon>
            <span>{{ gameScore }}</span>
          </div>
        </div>

        <div class="challenge-tasks">
          <div 
            v-for="(task, index) in challengeTasks" 
            :key="index"
            class="task-card"
            :class="{ active: index === currentTaskIndex, completed: task.completed }"
          >
            <div class="task-number">{{ index + 1 }}</div>
            <div class="task-content">
              <h4>{{ task.question }}</h4>
              <div v-if="index === currentTaskIndex && !task.completed" class="task-options">
                <el-button 
                  v-for="(opt, i) in task.options" 
                  :key="i"
                  :type="task.userAnswer === i ? 'primary' : 'default'"
                  @click="answerTask(index, i)"
                >
                  {{ opt }}
                </el-button>
              </div>
              <div v-if="task.completed" class="task-result">
                <el-icon :style="{ color: task.isCorrect ? '#67c23a' : '#f56c6c' }">
                  <component :is="task.isCorrect ? 'CircleCheck' : 'CircleClose'" />
                </el-icon>
                <span>{{ task.isCorrect ? '正确' : '错误' }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <el-button @click="quitChallenge" :disabled="isSubmitting">
          退出挑战
        </el-button>
        <el-button 
          v-if="allTasksCompleted"
          type="primary" 
          :loading="isSubmitting"
          @click="submitChallenge"
        >
          提交结果
        </el-button>
      </template>
    </el-dialog>

    <!-- 完成对话框 -->
    <el-dialog
      v-model="showResultDialog"
      title="挑战完成"
      width="600px"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div class="result-content">
        <div class="result-icon success">
          <el-icon><Trophy /></el-icon>
        </div>
        <h2>🎉 挑战完成！</h2>
        <p>太棒了！你完成了今日挑战</p>

        <div class="result-details">
          <div class="result-item">
            <span>正确题数:</span>
            <strong>{{ correctTasks }} / {{ challengeTasks.length }}</strong>
          </div>
          <div class="result-item">
            <span>用时:</span>
            <strong>{{ formatTime(elapsedTime) }}</strong>
          </div>
          <div class="result-item">
            <span>基础积分:</span>
            <strong>{{ todayChallenge.baseReward }}</strong>
          </div>
          <div class="result-item">
            <span>连击加成:</span>
            <strong class="bonus">+{{ streakBonus }}</strong>
          </div>
          <div class="result-item total">
            <span>总积分:</span>
            <strong class="total-points">{{ totalReward }}</strong>
          </div>
        </div>

        <el-alert
          title="恭喜你！连续打卡奖励已发放"
          type="success"
          :closable="false"
          show-icon
        />
      </div>
      <template #footer>
        <el-button type="primary" @click="finishChallenge">
          领取奖励
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  ArrowLeft, CircleCheck, CircleClose, Clock, Trophy,
  TrendCharts, Timer, Star, Medal
} from '@element-plus/icons-vue'

const router = useRouter()

// 游戏统计
const gameStats = ref({
  streak: 6,
  completed: 28,
  points: 5680
})

// 今日挑战
const todayChallenge = ref({
  title: 'IT知识快问快答',
  description: '完成20道IT相关知识问题，限时10分钟',
  icon: '💻',
  difficulty: '中等',
  timeLimit: 10,
  baseReward: 200,
  streakBonus: 10,
  type: 'quiz',
  color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
})

// 今日是否完成
const todayCompleted = ref(false)
const completedTime = ref('09:30')
const completedPoints = ref(220)

// 日历数据
const calendarDays = ref(generateCalendar())

// 挑战历史
const challengeHistory = ref([
  {
    date: '2024-10-10',
    title: '销售技巧挑战',
    type: '零售',
    difficulty: '简单',
    score: 95,
    reward: 180,
    status: '已完成'
  },
  {
    date: '2024-10-09',
    title: '生产流程优化',
    type: '制造',
    difficulty: '中等',
    score: 88,
    reward: 210,
    status: '已完成'
  },
  {
    date: '2024-10-08',
    title: '客户服务场景',
    type: '零售',
    difficulty: '简单',
    score: 92,
    reward: 190,
    status: '已完成'
  },
  {
    date: '2024-10-07',
    title: '算法思维训练',
    type: 'IT',
    difficulty: '困难',
    score: 0,
    reward: 0,
    status: '已错过'
  }
])

// 挑战游戏状态
const showChallengeDialog = ref(false)
const challengeProgress = ref(0)
const isLoading = ref(false)
const elapsedTime = ref(0)
const gameScore = ref(0)
const currentTaskIndex = ref(0)
const isSubmitting = ref(false)
const showResultDialog = ref(false)

// 挑战任务
const challengeTasks = ref([
  {
    question: 'HTML的全称是什么？',
    options: ['Hyper Text Markup Language', 'High Tech Modern Language', 'Home Tool Markup Language'],
    correctAnswer: 0,
    userAnswer: null,
    completed: false,
    isCorrect: false
  },
  {
    question: 'CSS的作用是什么？',
    options: ['控制网页样式', '编写程序逻辑', '存储数据'],
    correctAnswer: 0,
    userAnswer: null,
    completed: false,
    isCorrect: false
  },
  {
    question: 'JavaScript是一种什么语言？',
    options: ['编程语言', '标记语言', '样式语言'],
    correctAnswer: 0,
    userAnswer: null,
    completed: false,
    isCorrect: false
  }
])

// 计算属性
const allTasksCompleted = computed(() => {
  return challengeTasks.value.every(t => t.completed)
})

const correctTasks = computed(() => {
  return challengeTasks.value.filter(t => t.isCorrect).length
})

const totalReward = computed(() => {
  return todayChallenge.value.baseReward + streakBonus.value
})

const streakBonus = computed(() => {
  return Math.round(todayChallenge.value.baseReward * (todayChallenge.value.streakBonus / 100) * gameStats.value.streak)
})

// 生成日历
function generateCalendar() {
  const today = new Date()
  const currentMonth = today.getMonth()
  const currentDate = today.getDate()
  const daysInMonth = new Date(today.getFullYear(), currentMonth + 1, 0).getDate()
  
  const days = []
  for (let i = 1; i <= daysInMonth; i++) {
    const isToday = i === currentDate
    const isFuture = i > currentDate
    const isPast = i < currentDate
    
    days.push({
      day: i,
      date: `${today.getFullYear()}-${(currentMonth + 1).toString().padStart(2, '0')}-${i.toString().padStart(2, '0')}`,
      isToday,
      isFuture,
      completed: isPast && Math.random() > 0.2, // 模拟80%完成率
      missed: isPast && Math.random() > 0.8
    })
  }
  
  return days
}

// 获取难度类型
function getDifficultyType(difficulty) {
  const map = { '简单': 'success', '中等': 'warning', '困难': 'danger' }
  return map[difficulty] || 'info'
}

// 获取类型颜色
function getTypeColor(type) {
  const map = {
    'IT': 'primary',
    '零售': 'success',
    '制造': 'warning',
    '餐饮': 'danger'
  }
  return map[type] || 'info'
}

// 计算总奖励
function calculateTotalReward() {
  const base = todayChallenge.value.baseReward
  const bonus = Math.round(base * (todayChallenge.value.streakBonus / 100) * gameStats.value.streak)
  return base + bonus
}

// 格式化时间
function formatTime(seconds) {
  const mins = Math.floor(seconds / 60)
  const secs = seconds % 60
  return `${mins}:${secs.toString().padStart(2, '0')}`
}

// 获取计时器颜色
function getTimerColor() {
  const percentage = Math.round((elapsedTime.value / (todayChallenge.value.timeLimit * 60)) * 100)
  if (percentage < 50) return '#67c23a'
  if (percentage < 80) return '#e6a23c'
  return '#f56c6c'
}

// 开始挑战
function startChallenge() {
  isLoading.value = true
  
  setTimeout(() => {
    isLoading.value = false
    showChallengeDialog.value = true
    
    // 开始计时
    const timer = setInterval(() => {
      if (elapsedTime.value < todayChallenge.value.timeLimit * 60 && showChallengeDialog.value) {
        elapsedTime.value++
      } else {
        clearInterval(timer)
        if (showChallengeDialog.value && !allTasksCompleted.value) {
          ElMessage.warning('时间到！挑战结束')
          submitChallenge()
        }
      }
    }, 1000)
  }, 500)
}

// 回答任务
function answerTask(index, answerIndex) {
  const task = challengeTasks.value[index]
  task.userAnswer = answerIndex
  task.completed = true
  task.isCorrect = answerIndex === task.correctAnswer
  
  if (task.isCorrect) {
    gameScore.value += 10
    ElMessage.success('回答正确！+10分')
  } else {
    ElMessage.error('回答错误')
  }
  
  // 自动进入下一题
  if (index < challengeTasks.value.length - 1) {
    currentTaskIndex.value = index + 1
  }
}

// 提交挑战
async function submitChallenge() {
  isSubmitting.value = true
  
  await new Promise(resolve => setTimeout(resolve, 1000))
  
  isSubmitting.value = false
  showChallengeDialog.value = false
  showResultDialog.value = true
}

// 完成挑战
function finishChallenge() {
  todayCompleted.value = true
  completedTime.value = new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
  completedPoints.value = totalReward.value
  showResultDialog.value = false
  
  // 更新统计
  gameStats.value.completed++
  gameStats.value.streak++
  gameStats.value.points += totalReward.value
  
  // 更新日历
  const today = calendarDays.value.find(d => d.isToday)
  if (today) {
    today.completed = true
  }
  
  // 添加到历史
  challengeHistory.value.unshift({
    date: new Date().toLocaleDateString('zh-CN'),
    title: todayChallenge.value.title,
    type: 'IT',
    difficulty: todayChallenge.value.difficulty,
    score: gameScore.value,
    reward: totalReward.value,
    status: '已完成'
  })
  
  ElMessage.success('恭喜完成今日挑战！明天继续加油！')
}

// 退出挑战
function quitChallenge() {
  ElMessage.warning('挑战已退出')
  showChallengeDialog.value = false
  
  // 重置状态
  elapsedTime.value = 0
  gameScore.value = 0
  currentTaskIndex.value = 0
  challengeTasks.value.forEach(t => {
    t.completed = false
    t.userAnswer = null
    t.isCorrect = false
  })
}

// 返回
function goBack() {
  router.push('/learning/games/center')
}
</script>

<style scoped>
.daily-challenge {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.game-header {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 30px;
  padding: 24px;
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  border-radius: 12px;
  color: #8b4513;
}

.game-title {
  flex: 1;
}

.game-title h1 {
  margin: 0 0 8px 0;
  font-size: 28px;
  color: #8b4513;
}

.game-title p {
  margin: 0;
  color: #a0522d;
}

.game-stats {
  display: flex;
  gap: 40px;
}

.game-stats :deep(.el-statistic__head) {
  color: #a0522d;
}

.game-stats :deep(.el-statistic__content) {
  color: #8b4513;
  font-weight: bold;
}

/* 挑战日历 */
.challenge-calendar {
  background: white;
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.challenge-calendar h2 {
  margin: 0 0 24px 0;
  font-size: 22px;
  color: #303133;
  text-align: center;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.calendar-day {
  aspect-ratio: 1;
  background: #f5f7fa;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.calendar-day.today {
  border-color: #409eff;
  background: #ecf5ff;
}

.calendar-day.completed {
  background: #f0f9ff;
}

.calendar-day.missed {
  background: #fef0f0;
}

.calendar-day.future {
  opacity: 0.4;
}

.day-number {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.day-status {
  font-size: 20px;
}

.day-status .el-icon {
  display: block;
}

.calendar-day.completed .el-icon {
  color: #67c23a;
}

.calendar-day.missed .el-icon {
  color: #f56c6c;
}

.calendar-day.today .el-icon {
  color: #409eff;
}

.calendar-legend {
  display: flex;
  justify-content: center;
  gap: 32px;
  padding-top: 20px;
  border-top: 2px solid #f0f2f5;
  color: #606266;
  font-size: 14px;
}

.calendar-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 今日挑战 */
.today-challenge {
  background: white;
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.challenge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.challenge-header h2 {
  margin: 0;
  font-size: 22px;
  color: #303133;
}

.challenge-date {
  color: #909399;
  font-size: 14px;
}

.challenge-card {
  border: 2px solid #409eff;
}

.challenge-info {
  margin-bottom: 24px;
}

.challenge-badge {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 24px;
}

.badge-icon {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  flex-shrink: 0;
}

.badge-info h3 {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: #303133;
}

.badge-info p {
  margin: 0;
  color: #606266;
  line-height: 1.6;
}

.challenge-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
  padding: 20px;
  background: #f5f7fa;
  border-radius: 12px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #606266;
  font-size: 14px;
}

.detail-item .el-icon {
  color: #409eff;
}

.rewards-preview {
  padding: 20px;
  background: #fff7e6;
  border-radius: 12px;
}

.rewards-preview h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #303133;
}

.rewards-list {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.challenge-action {
  text-align: center;
  padding-top: 24px;
  border-top: 2px solid #f0f2f5;
}

/* 已完成状态 */
.completed-state {
  padding: 40px;
}

.completed-info {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 24px;
}

.completed-stat {
  text-align: center;
}

.completed-stat span {
  display: block;
  margin-bottom: 8px;
  color: #909399;
  font-size: 14px;
}

.completed-stat strong {
  font-size: 28px;
  color: #303133;
}

.completed-stat .points {
  color: #e6a23c;
}

.completed-stat .streak {
  color: #67c23a;
}

/* 挑战游戏 */
.challenge-game {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  min-height: 60vh;
}

.game-timer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  background: #f5f7fa;
  border-radius: 12px;
}

.timer-text {
  font-size: 24px;
  font-weight: bold;
  font-family: 'Consolas', monospace;
}

.game-score {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 32px;
  font-weight: bold;
  color: #409eff;
}

.challenge-tasks {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.task-card {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: white;
  border: 2px solid #e4e7ed;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.task-card.active {
  border-color: #409eff;
  background: #ecf5ff;
}

.task-card.completed {
  opacity: 0.7;
}

.task-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #409eff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  flex-shrink: 0;
}

.task-content {
  flex: 1;
}

.task-content h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: #303133;
}

.task-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.task-result {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
}

/* 结果对话框 */
.result-content {
  padding: 20px;
  text-align: center;
}

.result-icon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
}

.result-icon.success {
  background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
  color: white;
}

.result-content h2 {
  margin: 0 0 12px 0;
  font-size: 28px;
  color: #303133;
}

.result-content > p {
  margin: 0 0 32px 0;
  color: #606266;
  font-size: 16px;
}

.result-details {
  background: #f5f7fa;
  padding: 24px;
  border-radius: 12px;
  margin-bottom: 24px;
}

.result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #e4e7ed;
}

.result-item:last-child {
  border-bottom: none;
}

.result-item.total {
  padding-top: 16px;
  margin-top: 8px;
  border-top: 2px solid #409eff;
  border-bottom: none;
}

.result-item span {
  color: #606266;
  font-size: 15px;
}

.result-item strong {
  font-size: 20px;
  color: #303133;
}

.result-item .bonus {
  color: #67c23a;
}

.result-item .total-points {
  font-size: 32px;
  color: #409eff;
}

/* 挑战历史 */
.challenge-history {
  background: white;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.challenge-history h2 {
  margin: 0 0 24px 0;
  font-size: 22px;
  color: #303133;
}

@media (max-width: 768px) {
  .calendar-grid {
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
  }
  
  .challenge-details {
    grid-template-columns: 1fr;
  }
  
  .completed-info {
    flex-direction: column;
    gap: 20px;
  }
}
</style>

